<template>
  <div class="playMusic">
    <img class="bg" :src="playDetail.al.picUrl" alt="" />
    <!-- <div
      class="bg"
      :style="{ backgroundImage:`ur1(${playDetail.al.picUrl})` }"
    ></div> -->
    <div class="playTop">
      <div class="back" @click="$emit('back')">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-arrowLeft"></use>
        </svg>
      </div>
      <div class="center">
        <div class="title">
          <marquee behavior="scroll" direction="left">
            {{ playDetail.al.name }}</marquee
          >
        </div>
      </div>
      <div class="share">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-share_icon"></use>
        </svg>
      </div>
    </div>
    <div class="playContent" v-show="!isLyric">
      <img
        class="needle"
        :class="{ active: !paused }"
        src="@/assets/img/download1.png"
        alt=""
      />
      <img class="disc" src="@/assets/img/download2.png" alt="" />
      <img class="playImg" :src="playDetail.al.picUrl" alt="" />
    </div>
    <div class="playLyric" v-show="isLyric" ref="playLyric">
      <p
        :class="{
          active:
            currentTime * 1000 >= item.pre && currentTime * 1000 < item.time,
        }"
        v-for="(item, i) in $store.getters.lyricList"
        :key="i"
      >
        {{ item.lyric }}
      </p>
    </div>
    <div class="progress"></div>
    <div class="playFooter">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-xunhuan"></use>
      </svg>
      <svg class="icon" aria-hidden="true" @click="goPlay(-1)">
        <use xlink:href="#icon-huaban10"></use>
      </svg>
      <svg class="icon play" aria-hidden="true" v-if="paused" @click="play">
        <use xlink:href="#icon-zanting"></use>
      </svg>
      <svg class="icon play" aria-hidden="true" v-else @click="play">
        <use xlink:href="#icon-zanting1"></use>
      </svg>
      <svg class="icon" aria-hidden="true" @click="goPlay(1)">
        <use xlink:href="#icon-icon-1"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-icon--"></use>
      </svg>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import store from "@/store";

export default {
  props: ["playDetail", "paused", "play"],
  data: function () {
    return {
      isLyric: true,
    };
  },
  computed: {
    ...mapState(["lyric", "currentTime", "playlist", "playCurrentIndex"]),
  },
  watch: {
    currentTime: function (newValue) {
      console.log(newValue);
      console.log([this.$refs.playLyric]);
      let p = document.querySelector("p.active");
      if (p) {
        this.$refs.playLyric.scrollTop = p.offsetTop;
        console.log([p]);
      }
    },
  },
  methods: {
    goPlay(num) {
      console.log(num);
      console.log(this.playlist);
      console.log(this.playcurrentIndex);
      let index = this.playcurrentIndex + num;
      if (index < 0) {
        index = this.playlist.length - 1;
      } else if (index == this.playlist.length) {
        index = 0;
      }
      store.commit("setPlayIndex", index);
    },
  },
};
</script>
<style lang="less" scoped>
.playMusic {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-size: auto 100%;
    filter: blur(60px);
  }
  .playTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 7.5rem;
    height: 1.2rem;
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    padding: 0 0.4rem;
    .icon {
      fill: #fff;
      width: 0.4rem;
      height: 0.4rem;
    }
    marquee {
      width: 5rem;
      flex: 1;
    }
  }
  .playContent {
    position: absolute;
    width: 7.5rem;
    height: 7.5rem;
    left: 0;
    top: 1.5rem;
    .needle {
      width: 2.5rem;
      height: auto;
      position: absolute;
      left: 3.5rem;
      transform-origin: 0.3rem 0;
      transform: rotate(-10deg);
      transition: all 1s;
      z-index: 10;
    }
    .needle.active {
      width: 2.5rem;
      height: auto;
      position: absolute;
      left: 3.5rem;
      transform-origin: 0.3rem 0;
      transform: rotate(15deg);
      transition: all 1s;
      z-index: 10;
    }
    .disc {
      width: 1.9rem;
      height: auto;
      position: absolute;
      left: 44%;
      z-index: 99;
      top: 2%;
      transform: rotate(12deg);
    }
    .playImg {
      width: 3.4rem;
      height: 3.4rem;
      border-radius: 1.7rem;
      position: absolute;
      left: calc(50% - 1.6rem);
      top: 2.5rem;
    }
  }
  .playFooter {
    width: 7.5rem;
    height: 1.5rem;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.4rem;
    .icon {
      fill: #fff;
      width: 0.5rem;
      height: 0.5rem;
    }
    .play.icon {
      width: 1rem;
      height: 1rem;
    }
  }

  .playLyric {
    position: absolute;
    width: 7.5rem;
    height: 7.5rem;
    left: 0;
    top: 1.5rem;
    top: calc(50% - 4rem);
    overflow: scroll;
    text-align: center;
    color: #fff;
    padding: 0.2rem 0;
    .active {
      color: red;
    }
  }
}
</style>
